'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';

export default function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const pathname = usePathname();
  const isHomePage = pathname === '/';

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 如果是首页，不显示这个导航栏
  if (isHomePage) {
    return null;
  }

  const navigation = [
    { name: '首页', href: '/' },
    { name: '注册公司', href: '/register' },
    { name: '代理记账', href: '/accounting' },
    { name: '税务筹划', href: '/tax' },
    { name: '工商服务', href: '/business' },
    { name: '关于我们', href: '/about' },
    { name: '联系我们', href: '/contact' },
  ];

  return (
    <nav className={`${
      isHomePage ? (isScrolled ? 'fixed top-0 left-0 right-0 bg-white shadow-md z-50' : 'bg-transparent') 
      : 'fixed top-0 left-0 right-0 bg-white shadow-md z-50'
    } transition-all duration-300`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex items-center">
            <Link href="/" className="flex items-center">
              <Image
                src="/logo.png"
                alt="Logo"
                width={40}
                height={40}
                className="mr-2"
              />
              <span className={`text-lg font-semibold ${
                isHomePage ? (isScrolled ? 'text-gray-900' : 'text-white') 
                : 'text-gray-900'
              } hidden sm:block transition-colors`}>
                江苏苏科会计服务有限公司
              </span>
              <span className={`text-lg font-semibold ${
                isHomePage ? (isScrolled ? 'text-gray-900' : 'text-white') 
                : 'text-gray-900'
              } sm:hidden transition-colors`}>
                苏科会计
              </span>
            </Link>
          </div>

          {/* Desktop menu */}
          <div className="hidden sm:flex sm:items-center sm:space-x-4">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className={`${
                  isHomePage ? (isScrolled ? 'text-gray-900 hover:text-blue-600' : 'text-white hover:text-gray-200') 
                  : 'text-gray-900 hover:text-blue-600'
                } px-3 py-2 rounded-md text-sm font-medium transition-colors`}
              >
                {item.name}
              </Link>
            ))}
          </div>

          {/* Mobile menu button */}
          <div className="flex items-center sm:hidden">
            <button
              type="button"
              className={`inline-flex items-center justify-center p-2 rounded-md ${
                isHomePage ? (isScrolled ? 'text-gray-900 hover:text-blue-600' : 'text-white hover:text-gray-200') 
                : 'text-gray-900 hover:text-blue-600'
              } transition-colors`}
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              <span className="sr-only">打开菜单</span>
              {!isMenuOpen ? (
                <svg
                  className="block h-6 w-6"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                </svg>
              ) : (
                <svg
                  className="block h-6 w-6"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile menu */}
      {isMenuOpen && (
        <div className="sm:hidden bg-white">
          <div className="px-2 pt-2 pb-3 space-y-1">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className="text-gray-900 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                {item.name}
              </Link>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
} 